<template>
  <div :style="{'height':height+'px'}">
    <div v-if="datas && datas.length>0" class="listshow" :style="{'height':height-70+'px'}">
      <a-card :bordered="false" :style="{ width: '100%' }">
        <a-card-grid class="card-demo" v-for="(item, index) in datas" :key="index" :style="{ width: '31%' }" :title="item.bname">
          <a-card hoverable :title="item.bname" :bordered="false" class="textellipsis">
            <template #extra>
              <slot :item="item as CollectType" :index="index"></slot>
              <span v-if="isopen" title="进入" class="settings mousecursor">
                <icon-caret-right size="18"  :strokeWidth="5" @click="inWebPage(item)"/>
              </span>
            </template>
            <p :style="{ margin: 0 ,color:'#409EFF'}" class="textellipsis" :title="item.bexplain">{{ item.bexplain }}</p><br/>
            <p :style="{ margin: 0 ,color:'#b0d4fa'}" class="textellipsis" :title="item.burl">{{ item.burl }}</p>
          </a-card>
        </a-card-grid>
      </a-card>
    </div>
    <div v-else class="listshow" :style="{'height':height-70+'px'}">
      <a-empty :style="{'margin-top':(height-70)/3+'px'}" description="暂无有效数据"/>
    </div>
    <div class="pageshow">
      <a-pagination
        :total="parmar.total"
        :page-size="parmar.pageSize"
        size="mini"
        show-total
        @change="change"
        show-jumper/>
    </div>
  </div>
</template>

<script setup lang="ts">
// 接收父组件传递的参数
import {RequestUtils} from "../../common/Utils/RequestUtils";
import {nextTick, onMounted, reactive, ref} from "vue";
import {CX_ListType} from "../../common/Type/CX_ListType";
import {CollectType} from "../../common/Type/CollectType";

const props = defineProps({
  // 请求地址
  url: {
    type: String,
    default: ""
  },
  // 搜索条件（单个）
  keyword: {
    type: String,
    default: ""
  },
  // 请求方式
  method: {
    type: String,
    default: "post"
  },
  // 搜索条件（多个）
  where: {
    type: Object,
    default: () => {
      return {};
    }
  },
  // 高度
  height: {
    type: Number,
    default: 300
  },
  /**
   * 是否可以点击进入
   */
  isopen:{
    type: Boolean,
    default: true
  }
});
const $emit = defineEmits(["loadOk"])
const datas = ref<CollectType[]>()
// 搜索条件
const parmar = reactive({
  pageNo: 1,
  pageSize: 30,
  pages: 1,
  keyword: "",
  ispage: true,
  args: {},
  total: 1,
})

/**
 * 加载数据
 * @constructor
 */
const LoadData = (): void => {
  parmar.args = props.where
  parmar.keyword = props.keyword
  RequestUtils({
    url: props.url,
    method: props.method,
    data: parmar
  }).then(result => {
    const d = result as any
    parmar.pageNo = d.current
    parmar.total = d.total
    parmar.pageSize = d.size
    parmar.pages = d.pages
    datas.value = d.records as CollectType[]
  })
}
/**
 * 页码发生改变
 */
const change = (current): void => {
  parmar.pageNo = current
  LoadData()
}
/**
 * 进入网页
 */
const inWebPage = (item: CollectType): void => {
  window.api.openurl(item.burl)
}
onMounted(() => {
  parmar.args = props.where
  console.log("类型：",parmar.args)
  parmar.keyword = props.keyword
  nextTick(()=>{
    LoadData()
    const m: CX_ListType = {
      LoadData:():void=>LoadData()
    }
    $emit("loadOk", m)
  })
})
/**
 * 抛给父组件的方法（可以使用初始化完成的时候抛出去的一些方法，也可以使用ref找到这里的方法）
 */
defineExpose({
  LoadData:():void=>LoadData(),
});
</script>

<style lang=less scoped>
.listshow {
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px;
}

.pageshow {
  height: 50px;
  line-height: 50px;
  padding: 0 8px;
  margin: 0 auto;
}

.card-demo {
  margin: 8px;
}

.settings {
  margin: 0 4px;
}
</style>
